import React, { useState, useEffect } from 'react'
import styles from '../component/pay.module.css'
import imgs from '../public/123.jpg'
import { FireO, Description, PhoneCircleO, LikeO, Arrow, Like ,EnvelopO} from '@react-vant/icons'
import { Grid, Card, Image, Button, Toast, Space } from 'react-vant'


import { Popup } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
//天气
import Weather from '../component/Weather'
//天气的数据请求
import { TodayQuery } from '../sevice/payservice'

//缴费的主页面 图标
export default function Pay() {

    const navigate = useNavigate();

    const [visible1, setVisible1] = useState(false)
    const [paylist, setpaylist] = useState({})

    //当天的天气
    useEffect(() => {
        (async () => {
            let { data } = await TodayQuery()
            setpaylist(data.data)
        })()
    }, [])


    return (
        <>
            <div>
                <div onClick={()=>{
                     navigate("/Lifepay/feedback")
                }}>
                  <EnvelopO style={{ marginLeft: 290 ,marginBottom: -10 ,marginTop:  10,fontSize:30}}/><span style={{ marginTop:  10,color:'red'}}>意见反馈</span> 
               </div>
               
                <div style={{ paddingBottom: 5 ,fontSize:10}}>便民缴费 </div>
                <div style={{ background: '#FFFFFF' }}>
                    <Grid square  >

                        <Grid.Item icon={<FireO color='#f44336' />} text='水 电 燃' badge={{ dot: true }} onClick={() => {
                            navigate("/Lifepay/wef")  // 天气弹出层 ==========
                        }} />
                        <Grid.Item icon={<PhoneCircleO />} text='话费充值' badge={{ content: '惠' }}
                            onClick={() => {
                                navigate("/Lifepay/phone")
                            }} />
                        <Grid.Item icon={<Description />} text='新闻资讯'
                            onClick={() => {
                                navigate("/Lifepay/news")
                            }}
                        />
                        <Grid.Item icon={<LikeO />} text='天气' onClick={() => {
                            setVisible1(true)        // 天气弹出层 ==========
                        }} />

                    </Grid>





                </div>

            </div>

            <div>

                <Card round style={{ marginBottom: 20 }}>
                    <Card.Cover onClick={() => Toast.info('点击了Cover区域')}>
                        <Image src={imgs} />
                    </Card.Cover>
                    <Card.Header
                        extra={<Arrow />}
                        onClick={() => Toast.info('点击了Header区域')}
                    >
                        封面展示
                    </Card.Header>
                    <Card.Body onClick={() => Toast.info('点击了Body区域')}>
                        卡片内容区域
                    </Card.Body>
                    <Card.Footer>
                        <Space>
                            <Button round size='small'>
                                更多
                            </Button>
                            <Button
                                icon={<Like />}
                                round
                                color='linear-gradient(to right, #ff6034, #ee0a24)'
                                size='small'
                            >
                                Like
                            </Button>
                        </Space>
                    </Card.Footer>
                </Card>



            </div>




            {/* 弹出天气预报 */}
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '40vh',
                }}
            >



                <div className={styles.pay} style={{ height: '40vh', overflowY: 'scroll', padding: '20px' }}>
                    <Weather paylist={paylist}></Weather>
                </div>

            </Popup>




        </>)
}
